<template>
  <div id="views">
    <section class="sec1">
      <div class="relative">
        <div class="range">
          <p class="bg"></p>
        </div>
        <div class="rangeText">
          <div class="sts">
            <p class="p1">
              <span class="radio"></span>
            </p>
            <p class="p2">发起提现</p>
          </div>
          <div class="sts">
            <p class="p1">
              <span class="radio"></span>
            </p>
            <p class="p2">领取税筹任务</p>
          </div>
          <div class="sts ">
            <p class="p1">
              <span class="radio"></span>
            </p>
            <p class="p2">上传凭证</p>
          </div>
          <div class="sts">
            <p class="p1">
              <span class="radio"></span>
            </p>
            <p class="p2">成功提现</p>
          </div>
        </div>
      </div>
    </section>
    <!--3任务取消-->
    <section  class="sec2" >
      <div class="d1">
        <p class="p1">
          <img src="../../common/imgs/audit4.png" alt="">
        </p>
        <p class="p2">提现已取消</p>
        <p class="p3">请重新发起提现</p>
      </div>
      <div class="d2 detail">
        <p class="p1" v-if="task.name">
          <span class="left">众乐邦注册姓名</span>
          <span class="right">{{task.name}}</span>
        </p>
        <p class="p1" v-if="task.telphone">
          <span class="left">众乐邦注册手机号</span>
          <span class="right">{{task.telphone}}</span>
        </p>
        <p class="p1" v-if="task.withdraw_money">
          <span class="left">提现金额</span>
          <span class="right orange">{{task.withdraw_money}} CNY</span>
        </p>
        <p class="p1" v-if="task.process_time">
          <span class="left">审核时间</span>
          <span class="right">{{task.process_time}}</span>
        </p>
        <p class="p1" v-if="task.zlb_order_num">
          <span class="left">任务ID</span>
          <span class="right orange">#{{task.zlb_order_num}}</span>
        </p>
        <p class="p1">
          <span class="left">取消原因</span>
          <span class="right refuseReson">{{task.remark}}</span>
        </p>
      </div>
      <div class="sec3">
        <div v-if="task.images">
          <p class="p1">
            <span class="s1">任务凭证</span>
          </p>
          <div class="imgs">
            <span v-for="(item , index) in task.images" class="hoverhand" @click="showItemImg(item)">
              <img :src="item" alt="">
            </span>
          </div>
        </div>
        <div class="data_description" v-if="task.description">
          <p>凭证说明</p>
          <div>
            {{task.description}}
          </div>
        </div>
      </div>
      <div class="d3 sub">
        <button class="yellowbtn" @click="againTask">重新发起提现</button>
      </div>
    </section>
    <div :class="modalClass" id="modal-box" @click="hide">
      <div  id="content" @click="hide">
        <img :src="win_img" alt="" @click.stop="" >
      </div>
    </div>
<!--    <login-zlb ref="loginZlb" @loginSuccess="taskAjax()"/>-->
  </div>
</template>

<script>
  import {checkZlbLoginStatus, fetchTaxTask, taskDetail} from "../../http/api";
  import {apiReady} from "../../common/js/initApiApp";

  export default {
    name: "audit",
    data(){
      return{
        taskStatus : 1, //审核状态 0任务申请审核中  1任务申请审核通过 2审核拒绝 3取消
        imgs : [], //上传的图片
        win_img : '', //弹窗图片
        modalClass : 'modal-hide',
        task : {},
        app : null,
        account : null,
        order_num : null,
        // zlbToken : null,
        // zlbUri : null,
        // zlbBackFileMsg : [],
        // description :null,
      }
    },
    components:{
      // UploadImage : resolve => { require(['../../components/UploadImage'], resolve) }, /*图片上传*/
      // LoginZlb : resolve => { require(['../../components/loginZlb'],resolve) },//登录众乐帮
    },
    mounted() {
      let query = this.$route.query;
      this.order_num = query.order_num;
      let thiz = this;
      window.apiready = function(){
        thiz.app = apiReady.ready();
        thiz.app.closeFlower(0);
        thiz.account = thiz.app.getAccount();
        thiz.loadPage();
      };
    },
    methods:{
      loadPage(){
        let thiz = this;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          order_num : thiz.order_num,
          noToast : true,
          noLoading : true,
        };
        taskDetail(param).then(res => {
          thiz.log('任务详情res++++++',res);
          if(res.code == 200){
            let task = res.data.task;
            task.images = task.images ? task.images.split(',') : null;
            if(task.images){
              let arr = [];
              thiz.for(task.images , (item , index) => {
                arr.push(item);
              });
              task.images = arr;
            }
            thiz.task = task;
          }
        })
      },
      // taskAjax(){
      //   let thiz = this;
      //   let param = {
      //     token : thiz.account.token,
      //     version : thiz.app.inAV,
      //     zlb_order_num : thiz.task.zlb_order_num
      //   };
      //   thiz.log('领取任务接口参数+++' , param);
      //   fetchTaxTask(param).then(res => {
      //     thiz.log('领取任务接口返回+++',res);
      //     if(res.code == 200){
      //       require('../../common/js/toast').toast('发起提现成功');
      //       thiz.$router.push({ path : '/taxReward_step1' , query : {order_num : thiz.order_num}});
      //     }
      //   }).catch(err => {
      //     thiz.log('err+++',err)
      //   })
      // },
      againTask(){
        let thiz = this;
        let app = thiz.app;
        // app.trigger('resetWithdraw');
        app.toWin('performance');
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      showItemImg(src){
        this.win_img = src;
        this.modalClass = 'modal-show';
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  #views{
    background: #F8F8F8;padding-bottom: 0.48rem;
  }
  .sec1{
    height: 1.88rem;background: #fff;padding:0 0.54rem;padding-top: 0.7rem;
    >.relative{
      padding: 0 0.42rem;position: relative;
      >.range{
        position: relative;
        >.bg{
          background: #AAAAAA;height: 0.02rem;
        }
      }
      >.rangeText{
        color: #aaa;display: flex;justify-content: space-between;position: absolute;z-index: 1;left: 0;top: -0.14rem;width: 100%;
        >div{
          text-align: center;
          >.p1{
            display: inline-block;height: 0.28rem;overflow: hidden;
            >.radio{
              background: #aaa;width: 0.13rem;height: 0.13rem;display: block;border-radius: 50%;overflow: hidden;margin-top: 0.075rem;
            }
            >.inThis{
              display: inline-block;width: 0.28rem;height: 0.28rem;background: url("../../common/imgs/blackradio.png") center center no-repeat;
              background-size: 100% 100%;margin-top: 0;
            }
          }
          >.p2{
            font-size: 0.24rem;padding-top: 0.17rem;
          }
        }
        >.inThisStep{
          color: #262626;
        }
      }
    }
  }
  .sec2{
    background: #fff;margin-top: 0.2rem;
    >.d1{
      text-align: center;
      >.p1{
        padding: 0.2rem 0;font-size: 0;
        >img{
          width: 1.16rem;
        }
      }
      >.p2{
        color: #262626;font-size: 0.34rem;
      }
      >.p3{
        color: #F67311;font-size: 0.24rem;text-align: center;padding-top: 0.1rem;
      }
    }
    >.d2{
      padding: 0 0.3rem;padding-top: 0.35rem;
      >p{
        overflow: hidden;padding: 0.24rem 0rem;border-bottom: 0.01rem solid#EBEBEB;
        &:last-child{
          border-bottom: 0;
        }
        >span{
          font-size: 0.28rem;
        }
        >.left{
          float: left;color: #999;
        }
        >.right{
          float: right;
        }
        >.orange{
          color: #F67311;
        }
        >.refuseReson{
          width: 40%;display: inline-block;line-height: 120%;
        }
      }
    }
    >.sec3{
      background: #f8f8f8;margin-top: 0.2rem;padding-top: 0.2rem;
      >div{
        background: #fff;padding: 0.22rem 0.32rem;
        >.p1{
          color: #262626;
          >.orange{
            color: #F67311;
          }
          >.s2{
            font-size: 0.24rem;color: #999;
          }
        }
        >.imgs{
          padding:0.18rem 0;padding-top: 0;overflow: hidden;
          >#addBtn{
            width: 0.93rem;height: 0.93rem;display: inline-block;font-size: 0;float: left;margin-right: 0.3rem;margin-top: 0.38rem;
            background: url("../../common/imgs/addImgsBtn.png") center center no-repeat;background-size: 100% 100%;
          }
          >span{
            width: 1.06rem;height: 1.06rem;display: inline-block;font-size: 0;float: left;margin-right: 0.3rem;position: relative;
            padding-right: 0.13rem;padding-top: 0.13rem;margin-top: 0.25rem;
            >img{
              width: 100%;height: 100%;
            }
            >.delThis{
              display: inline-block;width: 0.32rem;height: 0.32rem;position: absolute;z-index: 1;
              right: 0;top:0;background: url("../../common/imgs/delThisImg.png");background-size: 100% 100%;
            }
          }
        }
      }
      >.data_description{
        padding-bottom: 0.3rem;
        >p{
          font-size: 0.3rem;color: #262626;
        }
        >div{
          color: #999;font-size: 0.28rem;padding-top: 0.2rem;line-height: 150%;
        }
      }
    }
  }
  .sub{
    padding: 0 0.3rem;padding-top: 0.4rem;background: #F8F8F8;
    >button{
      border-radius: 0.04rem;height: 0.88rem;font-size: 0.28rem;color: #181818;margin-top: 0;
    }
    >.greybtn{
      width: 100%;background: #ECECEC;
    }
  }
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
    padding-top: 0;padding-bottom: 0;
    >div{
      width: 100%;height: 100%;left: 0;top: 0;display: flex;justify-content: center;align-items: center;margin: 0 auto;
      >img{
        max-width: 85%;max-height: 85%;
      }
    }
  }
  @media screen and (min-width: 1025px){
    #modal-box>div{
      width: 600px;left: 50%;
    }
  }
  @import "../../common/css/animate.css";
</style>
